<template>
  <div id="main">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">项目管理</span>
        <i
          class="el-icon-circle-plus-outline"
          @click="appendProject"
        />
      </div>
      <el-table
        :data="tableData"
        border
        style="width: auto;margin-left:20px"
        @selection-change="changeFun"
      >
        <el-table-column
          label="选择"
          type="selection"
          width="30"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="120"
        />
        <el-table-column
          prop="projectVersion"
          label="项目版本"
          width="120"
        />
        <el-table-column
          prop="projectDesc"
          label="项目描述"
          width="180"
        />
        <el-table-column
          label="项目状态"
          prop="projectConfigProessStatus.desc"
          width="180"
        >
          <template
            slot="header"
            slot-scope="scope"
          >
            <span>项目状态</span>
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
            >
              <vue-editor
                v-model="helpArrays.PROJECT_STATUS"
                :disabled="true"
                :editor-toolbar="customToolbar"
              />
              <i
                slot="reference"
                class="el-icon-question"
                style="color:#409eff;font-size:20px;"
              />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span style="color:#e21918">{{ scope.row.projectConfigProessStatus.desc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template
            slot="header"
            slot-scope="scope"
          >
            <span>操作</span>
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
            >
              <vue-editor
                v-model="helpArrays.PROJECT_OPERATOR"
                :disabled="true"
                :editor-toolbar="customToolbar"
              />
              <i
                slot="reference"
                class="el-icon-question"
                style="color:#409eff;font-size:20px;"
              />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <!--<el-button-->
            <!--@click="handleClick(4,scope.row.id)"-->
            <!--type="text"-->
            <!--size="small"-->
            <!--v-if="scope.row.projectConfigProessStatus.level >= 20"-->
            <!--&gt;查看配置项</el-button>-->
            <el-button
              v-if="scope.row.projectConfigProessStatus.level < 20"
              type="text"
              size="small"
              @click="handleClick(0,scope.row.id)"
            >基础配置</el-button>
            <el-button
              v-if="scope.row.projectConfigProessStatus.level >= 20"
              type="text"
              size="small"
              @click="handleClick(1,scope.row.id)"
            >关系配置</el-button>
            <el-button
              v-if="scope.row.projectConfigProessStatus.level >= 20"
              type="text"
              size="small"
              @click="handleClick(2,scope.row.id)"
            >映射配置</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClick(3,scope.row.id)"
            >数据定制</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClick(8,scope.row.id)"
            >枚举管理</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClick(5,scope.row.id)"
            >修改项目</el-button>
            <el-button
              v-if="scope.row.projectConfigProessStatus.level >= 80"
              type="text"
              size="small"
              @click="handleClick(6,scope.row.id)"
            >生成</el-button>
            <el-button
              v-if="scope.row.projectConfigProessStatus.level >= 100"
              type="text"
              size="small"
              @click="handleClick(7,scope.row.id)"
            > 下载 </el-button>
          </template>

        </el-table-column>

      </el-table>
      <el-pagination
        :page-size="5"
        :total="total"
        small
        layout="prev, pager, next"
        @prev-click="prePage"
        @next-click="nextPage"
        @current-change="currentChange"
      />
      <el-dialog
        :visible.sync="dialogVisible"
        title="配置项"
        width="40%"
      >
        <el-button @click="urlPage(1)">
          基础配置
        </el-button>
        <el-button @click="urlPage(2)">
          model配置
        </el-button>
        <el-button @click="urlPage(3)">
          dao配置
        </el-button>
        <el-button @click="urlPage(4)">
          service配置
        </el-button>
        <el-button @click="urlPage(5)">
          controller配置
        </el-button>
        <el-button @click="urlPage(6)">
          view配置页
        </el-button>
      </el-dialog>
      <el-dialog
        :title="proName"
        :visible.sync="generate"
        width="40%"
      >
        <div
          slot="title"
          class="header-title"
        >
          <span class="el-dialog__title">{{ proName }}</span>
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <vue-editor
              v-model="helpArrays.GENERATOR_DESC"
              :disabled="true"
              :editor-toolbar="customToolbar"
            />
            <i
              slot="reference"
              class="el-icon-question"
              style="color:#409eff;margin-left:5px;font-size:20px;"
            />
          </el-popover>
        </div>
        <el-form
          id="create"
          :label-position="labelPosition"
          label-width="100px"
        >
          <el-form-item label="样式模板">
            <el-select v-model="deploy.tempStyleId">
              <el-option
                v-for="(item,index) in styleTemps"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文件模板">
            <el-select v-model="deploy.tempCoderId">
              <el-option
                v-for="(item,index) in coderTemps"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="代码管理组件">
            <el-select v-model="deploy.codeType">
              <el-option
                v-for="(item,index) in coderManager"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="generate = false">取 消</el-button>
          <el-button @click="Determine">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>
<script>
import {
  projectList,
  generator,
  proexport,
  download,
  docwindow
} from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      total: 0,
      arr: [],
      data: {
        current: 1,
        size: 5
      },
      checkBoxData: [],
      dialogVisible: false,
      tableData: [],
      generate: false,
      deploy: {
        pid: '',
        tempStyleId: '',
        tempCoderId: '',
        codeType: ''
      },
      pid: '',
      proName: '',
      labelPosition: 'right',
      coderManager: [],
      coderTemps: [],
      styleTemps: [],
      customToolbar: [],
      helpArrays: []
    }
  },
  mounted() {
    console.log(999)
    localStorage.removeItem('pid')
    localStorage.removeItem('addPro')
    projectList(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.tableData = response.data.data.records
          this.total = response.data.data.total
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error)
      })

    this.arr = ['PROJECT_OPERATOR', 'PROJECT_STATUS', 'GENERATOR_DESC']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    getProjectConfigProessStatus(res) {
      console.log(res)
      return JSON.parse(res)
    },

    currentChange(cpage) {
      this.data = {
        current: cpage,
        size: 5
      }
      projectList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    nextPage(cpage) {
      this.data = {
        current: cpage,
        size: 5
      }
      projectList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    prePage(cpage) {
      this.data = {
        current: cpage,
        size: 5
      }
      projectList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    handleClick(a, b) {
      localStorage.setItem('pid', b)
      if (a == 0) {
        this.$router.push('/admin/pageDb')
      }
      if (a == 1) {
        this.$router.push('/admin/workRela')
      }
      if (a == 2) {
        this.$router.push('/admin/workPage')
      }
      if (a == 3) {
        this.$router.push('/admin/custom')
      }
      if (a == 4) {
        this.dialogVisible = true
      }
      if (a == 5) {
        this.$router.push('/admin/project')
      }
      if (a == 6) {
        this.generator(b)
        this.pid = b
      }
      if (a == 7) {
        window.location.href =
          '' + process.env.BASE_API + '/project/download?id=' + b + ''
      }
      if (a == 8) {
        this.$router.push('/enum/index')
      }
    },
    generator(b) {
      var datas = {
        pid: b
      }
      generator(datas)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.generate = true
            this.proName = response.data.data.project.projectName
            this.coderManager = response.data.data.coderManager
            this.coderTemps = response.data.data.coderTemps
            this.styleTemps = response.data.data.styleTemps
            this.deploy.codeType = this.coderManager[0]
            this.deploy.tempCoderId = this.coderTemps[0].id
            this.deploy.tempStyleId = this.styleTemps[0].id
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    urlPage(a) {
      switch (a) {
        case 1:
          this.$router.push({
            path: '/admin/pageDb',
            query: { pid: localStorage.getItem('pid') }
          })
          break
        case 2:
          this.$router.push('/admin/pageModel')
          break
        case 3:
          this.$router.push('/admin/pageDao')
          break
        case 4:
          this.$router.push('/admin/pageService')
          break
        case 5:
          this.$router.push('/admin/pageController')
          break
        case 6:
          this.$router.push('/admin/pageView')
          break
      }
    },
    appendProject() {
      this.$router.push('/admin/project')
      localStorage.setItem('addPro', '')
    },
    updates() {
      // 项目修改
    },
    deletes() {
      // 项目删除
    },
    changeFun(val) {
      this.checkBoxData = val
    },
    Determine() {
      this.deploy.pid = this.pid
      proexport(this.deploy)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.generate = false
            projectList(this.data)
              .then(response => {
                if (response.data.code == 'SUCCESS') {
                  this.tableData = response.data.data.records
                  this.total = response.data.data.total
                } else {
                  alert(response.data.message)
                }
              })
              .catch(error => {
                alert(error.response.data.message)
              })
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    }
  }
}
</script>
<style >
.el-table th{
  overflow: inherit !important;
}
.cell{
  overflow: inherit !important;
}
#main {
  margin-top: 20px;
  margin-left: 20px;
}
#main #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#main #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#main #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#main #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
}
#main .el-input {
  width: 120px;
}
#main .el-table {
  margin: 20px;
}
#main .el-table--medium td {
  padding: 0;
}
#main .el-table--medium th {
  padding: 2px 0;
}
#main .el-dialog__body .el-button + .el-button {
  margin-left: 0px;
}
#main .el-dialog__body .el-button {
  margin-bottom: 10px;
  margin-right: 5px;
  border-color: #623f18;
  color: #623f18;
}
#main .el-dialog__header {
  background: #623f18;
}
#main .el-dialog__header .el-dialog__title {
  color: #fff;
}
#main .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

#main #create .el-input {
  width: 350px;
}
.el-popover .quillWrapper .ql-toolbar {
  display: none;
}
.el-popover .quillWrapper .ql-container {
  border: none;
}
</style>
